<template>
	<div class="toptem">
		<div class="overall">
			<div class="zp-box dial">
				<div class="panzi">
					<div class="bck-box circle" :style="` transform: rotate(${-90+180/list.length}deg)`">
						<div class="bck" v-for="(i,index) in list" :key="index"
							:style="`transform: rotate(${-index*360/list.length}deg) skew(${-90 + 360/list.length}deg);`">
						</div>
					</div>
					<div class="jiang" :style="`transform: rotate(${-index*360/list.length}deg) translateY(-7.5rem);`"
						v-for="(i,index) in list" :key="index">
						<span class="title">{{i.name}}</span>
						<div class="img">
							<img :src="i.photo" />
						</div>
					</div>
				</div>
				<div class="start-btn" @click="start()"></div>
			</div>
			<div class="jihuiclass">
				<div class="times">您有{{LuckyClick}}次抽奖机会</div>
				<div class="times" @click="app.goPage('/pages/member/center/prizewin')">查看中奖记录</div>
			</div>
		</div>



	</div>
</template>

<script>
	export default {
		data() {
			return {
				LuckyClick: 0,
				winner: 0, //指定获奖下标
				loading: false, //抽奖执行状态，防止用户多次点击
				panziElement: null,
				list: [],
				winnerGoods: null,
				isopen:0,
				tishi:'',
			}
		},
		mounted() {
			//this.panziElement = document.querySelector('.panzi')
		},
		onLoad(options) {
			this.getPrizegoods();
			this.getUserPrizenum();
			this.isopenPrize();
			if(this.LuckyClick<=0){
				this.LuckyClick = 0;
			}
		},

		methods: {
			animationClass() {
				//对应css样式中定义的class属性值,如果有更多的话可以继续添加  case 8:   return 'wr8'
				//return 'wr' + this.winner;
				switch (this.winner) {
								  case 0:
								    return 'wr0'
								  case 1:
								    return 'wr1'
								  case 2:
								    return 'wr2'
								  case 3:
								    return 'wr3'
								  case 4:
								    return 'wr4'
								  case 5:
								    return 'wr5'
								  case 6:
								    return 'wr6'
								  case 7:
								    return 'wr7'
								}
			},
			getPrizegoods() {
				//获取奖品
				this.$u.post('shop/api.Goods/getPrizegoods').then(res => {
					this.list = res.data;
					//通过获取奖品个数，来改变css样式中每个奖品动画的旋转角度
					// var(--nums) 实现css动画根据奖品个数，动态改变
					let root = document.querySelector(':root')
					root.style.setProperty('--nums', this.list.length)
				});
			},
			//获取用户抽奖次数
			getUserPrizenum() {
				this.$u.post('shop/api.Goods/getUserPrizenum').then(res => {
					this.LuckyClick = res.data;
					//this.LuckyClick = 10;
				});
			},
			getWinnerGoods() {
				this.$u.post('shop/api.Goods/getWinnerGoods').then(res => {
					this.winnerGoods = res.data.goods;
					//this.LuckyClick = res.data.userTimes || 0;
					//中了几等奖
					for (let i = 0; i < this.list.length; i++) {
						if (this.list[i].id == this.winnerGoods.id) {
							this.winner = i;
						}
					}
				});
			},
			isopenPrize(){
				this.$u.post('shop/api.Goods/isopenPrize').then(res => {
					this.isopen = res.data;
					this.tishi = res.msg;  
				});
			},
			
			//开始抽奖
			start() {
				if (this.isopen == 0) {
					this.isopenPrize();
					alert(this.tishi+'!!');
					return;
				}
				 
				if (this.LuckyClick == 0) {
					alert("您的抽奖机会已经用完了");
					/*
					this.$refs.uToast.show({
						title: `您的抽奖机会已经用完了`,
						type: 'success',
						position:'top'
					});
					*/
					return;
				}
				if (!this.loading) {
					//先移除上次抽奖样式
					this.panziElement = document.querySelector('.panzi')
					this.panziElement.classList.remove(this.animationClass())
					//此处可指定后端返回的指定奖品
					this.getWinnerGoods()
					this.winCallback()
					this.loading = true
				}
			},
			//中奖返回方法
			winCallback() {
				setTimeout(() => {
					/* 此处是为了解决当下次抽中的奖励与这次相同，动画不重新执行的 */
					/* 添加一个定时器，是为了解决动画属性的替换效果，实现动画的重新执行 */
					this.panziElement.classList.add(this.animationClass())
				}, 1000)
				// 因为动画时间为 3s ，所以这里3s后获取结果，其实结果早就定下了，只是何时显示，告诉用户
				setTimeout(() => {
					this.loading = false;
					this.LuckyClick--;
					alert(`恭喜你获得了${this.winnerGoods.name}`);
					/*
					this.$refs.uToast.show({
						title: `恭喜你获得了${this.winnerGoods.name}`,
						type: 'success',
						position:'top'
					});
					*/
				}, 3000)
			},
		}
	}
</script>
<style lang="scss" scoped>
	$zp_size: 19rem; //转盘尺寸
	$btn_size: 5rem; //抽奖按钮尺寸
	$time: 3s; //转动多少秒后停下的时间

	.jihuiclass {
		width: 100%;
		height: 100%;
		display: block;
		margin: 0 auto;
	}

	.toptem {
		background: url("/static/public/images/bg_bubbles.png");
		background-size: 100% 100%;
		position: fixed;
		background-repeat: no-repeat;
		width: 100% !important;
		height: 100% !important;
		display: block;
	}

	.times {
		background: #FF781A;
		text-align: center;
		width: 47%;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		color: #fff;
		margin-top: 20px;
		margin-left: 1%;
		display: inline-block;
		float: left;
		font-weight: 600;

	}

	.overall {
		display: block;
		width: 100%;
		height: 100%;
		margin-top: 160px !important;
		margin-left: 10px !important;
		text-align: center;
	}

	.zp-box {
		user-select: none;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: $zp_size;
		height: $zp_size;

		/* 抽奖按钮 */
		.start-btn {
			display: inline-block;
			//background: #f53737;
			background: url("/static/public/images/zhizhen.png");
			background-size: 100% 100%;
			top: -16px;
			position: relative;
			z-index: 2;
			cursor: pointer;
			width: 5rem;
			height: 6rem;
			border-radius: 36%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 25rpx;
			font-weight: bold;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
			/*
    &::before {
      content: '';
      width: 0;
      height: 0;
      border: 1rem solid transparent;
      border-top: 2rem solid transparent;
      border-bottom: 3rem solid #f53737;
      position: absolute;
      top: -4rem;
      z-index: -1;
    }
	*/
		}

		/* 盘子样式 */
		.panzi {
			overflow: hidden;
			border-radius: 50%;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 10px solid #f74e4e;
			box-sizing: border-box;

			/* 每个奖项的样式 */
			.jiang {
				position: absolute;
				height: 3rem;

				.title {
					font-weight: bold;
					font-size: 18px;
					color: #f74e4e;
					line-height: 38px;
				}

				.img {
					margin: 0rem auto;
					width: 3rem;
					height: 3rem;
					line-height: 3rem;
					overflow: hidden;
					color: white;

					img {
						height: 100%;
					}
				}
			}
		}

		.bck-box {
			overflow: hidden;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			// background: blue;
			border-radius: 50%;

			/* 转盘扇形背景 */
			.bck {
				box-sizing: border-box;
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 1;
				top: -50%;
				left: 51%;
				transform-origin: 0% 100%;
				// transform:skew(30deg);
			}

			/* 转盘背景色 */
			.bck:nth-child(2n) {
				background: #fffcb9;
			}

			.bck:nth-child(2n + 1) {
				background: #f8a281;
				box-shadow: 0 0 5px red;
			}
		}

		/* 下面的css样式为每个奖品的旋转动画，这里写了对应8个奖品的动画，如果想要更多的话，可以添加 */
		/* 例如： .wr8  @keyframes play8 */
		.wr0,
		.wr1,
		.wr2,
		.wr3,
		.wr4,
		.wr5,
		.wr6,
		.wr7,
		.wr8,
		.wr9 {
			animation-duration: $time;
			animation-timing-function: ease;
			animation-fill-mode: both;
			animation-iteration-count: 1;
		}

		.wr0 {
			animation-name: play0;
		}

		.wr1 {
			animation-name: play1;
		}

		.wr2 {
			animation-name: play2;
		}

		.wr3 {
			animation-name: play3;
		}

		.wr4 {
			animation-name: play4;
		}

		.wr5 {
			animation-name: play5;
		}

		.wr6 {
			animation-name: play6;
		}

		.wr7 {
			animation-name: play7;
		}

		.wr8 {
			animation-name: play8;
		}

		.wr9 {
			animation-name: play9;
		}

		@keyframes play0 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 0));
			}
		}

		@keyframes play1 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 1));
			}
		}

		@keyframes play2 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 2));
			}
		}

		@keyframes play3 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 3));
			}
		}

		@keyframes play4 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 4));
			}
		}

		@keyframes play5 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 5));
			}
		}

		@keyframes play6 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 6));
			}
		}

		@keyframes play7 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 7));
			}
		}

		@keyframes play8 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 8));
			}
		}

		@keyframes play9 {
			to {
				transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 9));
			}
		}
	}
</style>